<template>
  <el-header>

  </el-header>
  <el-main>
    <div class="center">
      <div class="center">
        <div class="zbk">直播课</div>
        <a href="https://www.tmooc.cn/live/" class="ckxq">查看详情>></a>
      </div>
      <div>
        <el-row :gutter="20">
          <el-col :span="6" v-for="item in arr1" style="margin:20px 0;">
            <el-card style="--el-card-padding: 0;width: 280px;height: 280px" class="scale">
              <a href="https://www.4399.com/">
                <img :src="item.url" style="width: 100%;height: 100%;">
              </a>
              <p style="font-size: 20px;padding: 20px">{{ item.title }}</p>
              <div class="a">
                  <span class="b" style="float:left;font-weight: bold; color:red;">
                    ￥{{ item.price }}
                  </span>
                <span style="float: right;">{{ item.people }}人报名</span>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <div class="center">
        <div class="zbk">会员课</div>
        <a href="https://www.tmooc.cn/vip/" class="ckxq">查看详情>></a>
      </div>
      <div>
        <el-row :gutter="20">
          <el-col :span="6" v-for="item in arr2" style="margin:20px 0;">
            <el-card style="--el-card-padding: 0;width: 280px;height: 280px;" class="scale">
              <a href="https://www.4399.com/">
                <img :src="item.url" style="width: 100%;height: 100%;">
              </a>
              <p style="font-size: 20px;padding: 20px">{{ item.title }}</p>
              <div class="a">
                  <span class="b" style="float:left;font-weight: bold; color:red;">
                    ￥{{ item.price }}
                  </span>
                <span style="float: right;">{{ item.people }}人报名</span>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <div class="center">
        <div class="zbk">免费课</div>
        <a href="https://www.tmooc.cn/free/" class="ckxq">查看详情>></a>
      </div>
      <div>
        <el-row :gutter="20">
          <el-col :span="6" v-for="item in arr3" style="margin:20px 0;">
            <el-card style="--el-card-padding: 0;width: 280px;height: 280px;" class="scale">
              <a href="https://www.4399.com/">
                <img :src="item.url" style="width: 100%;height: 100%;">
              </a>
              <p style="font-size: 20px;padding: 20px">{{ item.title }}</p>
              <div class="a">
                  <span class="b" style="float:left;font-weight: bold;color:#0aa1ed;">
                    {{ item.price }}
                  </span>
                <span style="float: right;">{{ item.people }}人报名</span>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <div class="center">
        <div class="zbk">精品课</div>
        <a href="https://www.tmooc.cn/advanced/" class="ckxq">查看详情>></a>
      </div>
      <div>
        <el-row :gutter="20">
          <el-col :span="6" v-for="item in arr4" style="margin:20px 0;">
            <el-card style="--el-card-padding: 0;width: 280px;height: 280px;" class="scale">
              <a href="https://www.7k7k.com/">
                <img :src="item.url" style="width: 100%;height: 100%;">
              </a>
              <p style="font-size: 20px;padding: 20px">{{ item.title }}</p>

              <div class="a">
                  <span class="b" style="float:left;font-weight: bold; color:red;">
                    ￥{{ item.price }}
                  </span>
                <span style="float: right;">{{ item.people }}人报名</span>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <div class="center">
        <div class="zbk">精品课</div>
        <a href="https://www.tmooc.cn/advanced/" class="ckxq">查看详情>></a>
      </div>
      <div>
        <el-row :gutter="20">
          <el-col :span="6" v-for="item in arr5" style="margin:20px 0;">
            <el-card style="--el-card-padding: 0;width: 280px;height: 280px;" class="scale">
              <a href="https://www.7k7k.com/">
                <img :src="item.url" style="width: 100%;height: 100%;">
              </a>
              <p style="font-size: 20px;padding: 20px">{{ item.title }}</p>
              <div class="a">
                  <span class="b" style="float:left;font-weight: bold; color:red;">
                    ￥{{ item.price }}
                  </span>
                <span style="float:right; ">{{ item.people }}人报名</span>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <div class="s" style="margin-top: 40px;">
        <img src="imgs/u.png" style="width: 1200px; height: 100px">
      </div>

    </div>
  </el-main>
  <el-footer>Footer</el-footer>
</template>

<script setup>

import {ref} from "vue";


const arr1 = ref([
  {title: "【商业插画】三分钟解锁表情包", price: '免费', people: 2935, url: "/imgs/a.jpg"},
  {title: "Python数据分析高薪特训营", price: "0.99", people: 1737, url: "/imgs/b.jpg",},
  {title: "Java高薪项目实战营", price: "9.90", people: 1449, url: "/imgs/c.png"},
  {title: "影视后期实战训练营", price: "9.90", people: 1954, url: "/imgs/d.jpg"},
]);
const arr2 = ref([
  {title: "一周上手小程序", price: "1.00 (会员免费)", people: 8972, url: "/imgs/f.png"},
  {title: "商业插画零基础手绘教程", price: "599.00 (会员免费)", people: 4796, url: "/imgs/g.png"},
  {title: "Linux系统管理", price: "199.00 (会员免费)", people: 2589, url: "/imgs/h.png"},
  {title: "网络安全实战训练营", price: "9.90 (会员免费)", people: 1949, url: "/imgs/e.jpg"},

])
const arr3 = ref([
  {title: "【WEB全栈工程师】脱产预习课", price: "免费", people: 1271, url: "/imgs/m.png"},
  {title: "【VFX商业视效】脱产预习课", price: "免费", people: 1843, url: "/imgs/n.jpg"},
  {title: "【UID全链路设计】脱产预习课", price: "免费", people: 1627, url: "/imgs/l.jpg"},
  {title: "【JAVA高级互联网架构师】脱产预习课", price: "免费", people: 2509, url: "/imgs/k.png"},
])
const arr4 = ref([
  {title: "功能测试工具（QTP）", price: 599, people: 3, url: "/imgs/i.png"},
  {title: "PR基础特效集合", price: 1588, people: 5, url: "/imgs/j.png"},
  {title: "【网络安全工程师】脱产预习课", price: 1688, people: 4, url: "/imgs/o.png"},
  {title: "Procreate萌新插画全解", price: 1980, people: 0, url: "/imgs/p.png"},
])
const arr5 = ref([
  {title: "信息流营销基础操作教程，网络营销技巧", price: 399, people: 0, url: "/imgs/r.jpg"},
  {title: "CAD工业设计基础全套教程_3D打印", price: 899, people: 1, url: "/imgs/s.jpg"},
  {title: "高级Java互联网架构师-DevOps架构师", price: 1999, people: 1, url: "/imgs/q.jpg"},
  {title: "GO语言与区块链开发高阶全套教程，高级程序员进阶必备", price: 1888, people: 0, url: "/imgs/t.jpg"},
])

</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.center {
  width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}

.scale:hover {
  box-shadow: 0 0px 20px 2px rgba(2, 221, 221);
  margin-top: -5px;
}

.a {
  padding: 15px;
  font-size: 14px;
}

.zbk {
  font-size: 20px;
  color: #333;
  display: inline-block;
  vertical-align: middle;
  float: left;
}

.ckxq {
  font-size: 14px;
  color: #999;
  float: right;
  text-decoration: none;
}
.ckxq:hover{
  color: red;
}
.s {
  transition: 2s;
}
.s:hover {
  transform: scale(1.1);
}

</style>

